<template>
  <div>

    <div class="row mb-1">
      <div class="col">
        <el-input placeholder="请输入内容" @change="start" v-model.lazy="like">

        </el-input>
      </div>

    </div>
    <div class="row mb-1">
      <div class="col">
        <el-button @click="start" type="primary">查询</el-button>
        <el-button @click="opened" type="primary">+添加文章</el-button>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <el-table :data="tableData" border height="65vh" style="width: 100%" @sort-change="sortchange">
          <el-table-column prop="ID" label="ID"></el-table-column>
          <el-table-column prop="name" label="标题"></el-table-column>
          <el-table-column prop="name" label="作者"></el-table-column>
          <el-table-column prop="showtype" :formatter="({ showtype }) => ['不显示', '文章', '公告'][showtype]"
            label="显示"></el-table-column>
          <el-table-column prop="readnumber" label="阅读数量"></el-table-column>
          <el-table-column prop="createdAt" sortable="custom" :formatter="({ createdAt }) => formatter(createdAt)"
            label="发布时间"></el-table-column>
          <el-table-column prop="updatedAt" sortable="custom" :formatter="({ updatedAt }) => formatter(updatedAt)"
            label="更新时间"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button type="success" @click="handleClick(scope.row)" size="default">修改</el-button>
              <el-button type="danger" @click="del(scope.row.ID)" size="default">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <el-pagination :="true" @current-change="handleCurrentChange" :page-size="Number(limit)"
          layout="prev, pager, next" :total="count"></el-pagination>
      </div>
    </div>

    <el-dialog :title="title" destroy-on-close v-model="dialogVisible" width="80%">
      <el-form size="default" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="ruleForm.showtype">
            <el-radio label="1">文章</el-radio>
            <el-radio label="2">公告</el-radio>
            <el-radio label="0">不显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文章内容">
          <Wangeditor id="context" :value="context" ref="contexteditor" :context="htmlcontext"></Wangeditor>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-radio v-model="changeradio" name="time" label="6">当前时间</el-radio>
          <el-radio v-model="changeradio" name="time" label="8">指定</el-radio>
          <el-date-picker v-model="ruleForm.releasetime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="阅读量">
          真实值 +
          <el-input-number v-model="ruleForm.readnumber" controls-position="right" :min="0">
          </el-input-number>
          <span>x &nbsp;</span>
          <el-input-number v-model="ruleForm.readnumberride" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
        <div class="row">
          <div class="col text-right">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Wangeditor from "../../../components/wangeditor.vue";
import { ElMessage } from "element-plus";
import { toLocaleDateString } from "../../../util/time";
import {
  asyncdelarticle,
  asynccreateorupdatearticle,
} from "../../../api/index";
import { Article } from "../data";
export default {
  name: "Article",
  components: {
    Wangeditor,
  },
  data() {
    return {
      dialogVisible: false,
      activeName: "详情",
      sortable: "DESC",
      limit: 20,
      offset: 0,
      order: "ID",
      like: "",
      title: "添加",
      ID: undefined,
      context: "",
      htmlcontext: "",
      ruleForm: Object.assign({}, Article),
      rules: {},
      isquestionbank: true,
      changeradio: "6",
    };
  },
  computed: {
    ...mapGetters(["getarticle", "getarticlecount"]),
    tableData() {
      return this.getarticle;
    },
    count() {
      return this.getarticlecount;
    },
  },
  mounted() {
    this.$store.dispatch("actionarticle", {
      _sortable: "DESC",
      _limit: 20,
      _offset: 0,
      _order: "ID",
    });
  },
  watch: {
    changeradio(i) {
      if (i == 6) this.ruleForm.releasetime = new Date();
    },
    limit() {
      this.start();
    },
    offset() {
      this.start();
    },
    order() {
      this.start();
    },
    sortable() {
      this.start();
    },
    like() {
      this.limit = 20;
      this.offset = 0;
    },
  },
  methods: {
    async start() {
      let { limit, offset, order, sortable, like } = this;
      try {
        let z;
        if (like.value) {
          z = ["name", like];
        }
        this.$store.dispatch("actionarticle", {
          _limit: limit,
          _offset: offset,
          _order: order,
          _sortable: sortable,
          _like: z,
        });
      } catch (e) {
        ElMessage.error(e);
      }
    },
    handleCurrentChange(val) {
      this.offset = this.limit * (val - 1);
    },
    handleClick(row) {
      this.title = "修改";
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.context = this.ruleForm.context;
      this.htmlcontext = this.ruleForm.htmlcontext;
      this.dialogVisible = true;
    },
    opened() {
      if (this.dialogVisible) {
        this.dialogVisible = false;
        return;
      }
      this.ruleForm = Object.assign(this.ruleForm, Article);
      this.context = this.ruleForm.context;
      this.htmlcontext = this.ruleForm.htmlcontext;
      this.dialogVisible = true;
    },
    sortchange(row) {
      const { prop, order } = row;
      if (order == "descending") {
        this.sortable = "DESC";
      } else {
        this.sortable = "ASC";
      }
      this.order = prop;
    },
    formatter(updatedAt) {
      return toLocaleDateString(updatedAt);
    },
    del(ID) {
      try {
        this.$confirm("是否删除该选项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await asyncdelarticle({ ID });
            ElMessage({
              type: "success",
              message: "删除成功!",
            });
            this.start();
          })
          .catch((e) => {
            ElMessage({
              message: "删除失败" + e,
              type: "error",
            });
          });
      } catch (e) {
        ElMessage({
          type: "info",
          message: "已取消删除",
        });
      }
    },
    async submit() {
      try {
        console.log(456456)
        const context = this.$refs.contexteditor.gethtml();
        const htmlcontext = this.$refs.contexteditor.getcontext();
        this.ruleForm.context = context;
        this.ruleForm.htmlcontext = htmlcontext;
        await asynccreateorupdatearticle(this.ruleForm);
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        this.start();
        this.dialogVisible = false;
      } catch (e) {
        ElMessage({
          message: e,
          type: "error",
        });
      }
    },
  },
};
</script>
